<template>
<div class="container">
  <headers :title="title" :refresh="isRefresh" :path="path"></headers>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
      <span class="icon icon2 tuijianma-icon"></span>
      <span class="tab-label">推荐码</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
  <div class="content">
    <div class="row no-gutter">
      <div class="col-100 task-id">任务ID：{{task.taskId}}</div>
    </div>
    <!-- Slider -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="img in imgData">
          <img :src="img">
        </div>
      </div>
      <div class="btn-box">
        <a class="button button-fill button-danger button-round" @click="appeal">申诉</a>
      </div>
      <div class="swiper-pagination2">
        <span>{{curIndex}}/{{imgCount}}</span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import Swiper from '../assets/js/swiper.min.js'

export default {
  ready () {
    $.init()
    this.getTaskById()
    this.swiper = new Swiper('.swiper-container', {
      loop: false
    })
  },
  data () {
    return {
      task: [],
      title: '查看不合格图片',
      path: '/buhege',
      taskId: this.$route.params.taskId,
      swiper: null,
      imgCount: 0,
      curIndex: 1,
      imgData: [],
      isRefresh: false
    }
  },
  methods: {
    getTaskById () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findUnQualifiedCustomerTaskById?id=' + this.taskId)
      .then((data) => {
        this.$set('task', data.data)
        data.data.taskImgUrl = data.data.taskImgUrl.split(',')
        this.$set('imgData', data.data.taskImgUrl)
        this.$set('imgCount', data.data.taskImgUrl.length)
        if (this.imgCount > 0) {
          setTimeout(() => {
            this.swiper = new Swiper('.swiper-container', {
              loop: false,
              onSlideChangeStart: (swiper) => {
                this.$set('curIndex', swiper.activeIndex + 1)
              }
            })
          }, 1500)
        }
      }, (res) => {
        $.alert('网络异常')
      })
    },
    appeal () {
      $.showIndicator()
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/customerAppeal?id=' + this.task.id)
      .then((data) => {
        if (data.data.success) {
          $.hideIndicator()
          $.alert(data.data.message, () => {
            this.$router.replace('/buhege')
          })
        }
        else {
          $.hideIndicator()
          $.alert(data.data.message)
          this.submitTag = true
        }
      }, (xhr) => {
        $.hideIndicator()
        $.alert('网络异常')
        this.submitTag = true
      })
      return true
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
@import '../assets/css/swiper.min.css';
.task-id{font-size:16px;padding:15px 15px 0 15px!important;}
.swiper-wrapper{width:100%;padding:10px 15px;}
.swiper-wrapper img{width:92%;}
.swiper-pagination .swiper-pagination-bullet{display:none;}
.swiper-pagination2{
  width:100%;
  padding:0 15px;
}
.swiper-pagination2 span{
  display:block;
  width:25%;
  text-align:center;
  margin:0 auto;
}
.btn-box{position:absolute;bottom:35px;left:30%;width:40%;margin:1em auto;z-index:9999;}
.btn-box button{width:100%;}
</style>